<template>
  <div class="wrapper404">
    <div  class="container404 clearfix">
      <div class="pic">
        <img class="pic_404" src="~@/assets/404_images/404.png">
        <img class="pic_cloud left" src="~@/assets/404_images/404_cloud.png">
        <img class="pic_cloud middle" src="~@/assets/404_images/404_cloud.png">
        <img class="pic_cloud right" src="~@/assets/404_images/404_cloud.png">
      </div>
      <div class="oops">
        <h3>OOPS!</h3>
        <p class="banquan">版权所有 <a>华尔街见闻</a></p>
        <p class="info">特朗普说这个页面你不能进......</p>
        <p class="check">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</p>
        <el-button type="primary" class="returnHome" round @click="returnHome">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
      returnHome: function () {
        this.$router.push('/')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" >
  .wrapper404{
    background: rgb(240, 242, 245);

    .container404{
      margin: 0 auto;
      padding: 150px 100px;
      width: 1200px;
      overflow: hidden;

      .pic{
        float: left;
        width: 600px;
        position: relative;

        .pic_404{
          width: 100%;
          height: auto;
        }
        .pic_cloud{
          position: absolute;
          opacity: 0;

          &.left{
            width: 80px;
            animation: left-fly-in-out 2s linear 1s;
          }
          &.middle{
            width: 42px;
            animation: middle-fly-in-out 2s linear 1.2s;
          }
          &.right{
            width: 62px;
            animation: right-fly-in-out 2s linear 1s;
          }

          @keyframes left-fly-in-out {
            0% {
              opacity: 0;
              top: -100px;
              left: 200px;
            }
            20% {
              opacity: 1;
              top: -80px;
              left: 160px;
            }
            80% {
              opacity: 1;
              top: -20px;
              left: 40px;
            }
            100% {
              opacity: 0;
              top: 0px;
              left: 0px;
            }
          }
          @keyframes middle-fly-in-out {
            0% {
              opacity: 0;
              top: -100px;
              left: 300px;
            }
            20% {
              opacity: 1;
              top: -80px;
              left: 260px;
            }
            80% {
              opacity: 1;
              top: -20px;
              left: 140px;
            }
            100% {
              opacity: 0;
              top: 0px;
              left: 100px;
            }
          }
          @keyframes right-fly-in-out {
            0% {
              opacity: 0;
              top: -100px;
              left: 400px;
            }
            20% {
              opacity: 1;
              top: -80px;
              left: 360px;
            }
            80% {
              opacity: 1;
              top: -20px;
              left: 240px;
            }
            100% {
              opacity: 0;
              top: 0px;
              left: 200px;
            }
          }

        }
      }

      .oops{
        float: left;
        width: 400px;

        h3{
          font-size: 32px;
          font-weight: bold;
          line-height: 40px;
          color: #1482f0;
          animation: slideUp 0.5s linear;
        }
        .banquan{
          font-size: 13px;
          line-height: 21px;
          color: grey;

          a{
            color: #337ab7;
            cursor: pointer;
          }
          animation: slideUp 0.5s linear 0.5s;
        }
        .info{
          font-size: 20px;
          line-height: 24px;
          color: #1482f0;
          animation: slideUp 0.5s linear 0.1s;
        }
        .check{
          font-size: 13px;
          line-height: 21px;
          color: grey;
          animation: slideUp 0.5s linear 0.2s;
        }
        .returnHome{
          animation: slideUp 0.5s linear 0.3s;
        }

        @keyframes slideUp {
          0% {
            opacity: 0;
            transform: translateY(60px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }
      }
    }
  }
</style>
